<template>
    <div ref="chartEl" style="height: 500px;margin-top: 200px;">

    </div>
</template>

<script setup lang="ts">
import { createChart } from 'lightweight-charts';
import { onMounted, ref } from 'vue';


const chartEl = ref()

const init = () => {
    const chartOptions = { layout: { textColor: 'black', background: { type: 'solid', color: 'white' } } };
const chart = createChart(chartEl.value, chartOptions as any);
const histogramSeries = chart.addHistogramSeries({ color: '#26a69a' });

const data = [
    { value: 1, time: 1642425322 }, 
    { value: 8, time: 1642511722 }, 
    { value: 10, time: 1642598122 }, 
    { value: 20, time: 1642684522 }, 
    { value: 3, time: 1725494400000, color: 'red' }, 
    // { value: 43, time: 1642857322 }, 
    { value: 41, time: 1726099200000, color: 'red' },
    // { value: 43, time: 1643030122 }, 
    // { value: 56, time: 1643116522 }, 
    { value: 46, time: 1726704000000, color: 'red' }];

histogramSeries.setData(data as any);

chart.timeScale().fitContent();
}

onMounted(() => {
    console.log(chartEl.value);
    
    init()
})
</script>

<style lang="less" scoped></style>